<template>
  <el-table
    ref="elTable"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    :height="height || '100%'"
    :header-row-class-name="'color-header'"
    style="width: 100%"
  >
    <!-- tableSelectChangeHandle 表格row选中事件，判断是否有选项列 -->
    <el-table-column
      v-if="tableSelectChangeHandle"
      align="center"
      type="selection"
      width="55px"
    ></el-table-column>
    <!-- indexVisible 表格序号配置，判断是否有序号列 -->
    <el-table-column
      v-if="indexVisible"
      :label="indexVisible.label || '序号'"
      type="index"
      :align="indexVisible.align || 'center'"
      :width="indexVisible.width || '55px'"
    ></el-table-column>

    <el-table-column
      v-for="item in columns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :align="item.align || 'left'"
      :min-width="item.minWidth"
      :fixed="item.fixed"
      show-overflow-tooltip
    >
      <template #default="scope">
        <!-- 表格项 图标 -->
        <i v-if="item.icon" :style="item.iconStyle" :class="item.icon"></i>
        <!-- 彩色iconfont图标 如symbolIcon:'#naozhong' -->
        <svg v-if="item.symbolIcon" class="symbolIcon" aria-hidden="true">
          <use :xlink:href="item.symbolIcon"></use>
        </svg>
        <!-- 自定义格式化表格项  设置表格显示内容、字体、背景色、自定义cellStyle -->
        <span
          v-if="item.formatter"
          :style="{
            color: item.textColor || (item.textColorHandle && item.textColorHandle(scope.row)),
            background:
              item.background || (item.backgroundHandle && item.backgroundHandle(scope.row)),
            ...(item.cellStyle || {})
          }"
          class="table-cell"
        >
          {{ item.formatter(scope.row) }}
        </span>
        <span v-else class="table-cell">{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column
      v-if="operations && operationVisible"
      label="操作"
      :fixed="operationFixed"
      :header-align="'left'"
      :align="'center'"
      :width="operationWidth || '120px'"
    >
      <template #default="scope">
        <div class="operation-btn-box">
          <template v-for="(item, index) in operations">
            <!-- 函数优先级低于属性 -->
            <!-- disabled是否禁用  disableHandle禁用函数 根据row数据判断是否禁用 -->
            <el-button
              v-if="item.perm && !item.component"
              :key="index"
              class="operation-btn"
              :disabled="item.disabled || (item.disableHandle && item.disableHandle(scope.row))"
              type="text"
              :style="{ color: item.color || '#4195F0', border: 'none' }"
              :icon="item.icon || (item.iconHandle && item.iconHandle(scope.row))"
              @click="item.handle(scope.row)"
            >
              {{ item.label || (item.labelHandle && item.labelHandle(scope.row)) }}
            </el-button>

            <!-- 传入row自定义展示内容 -->
            <component
              :is="item.component"
              v-if="item.perm && item.component"
              :key="index"
              :row="scope.row"
            />
          </template>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { IElTable } from '@/common/types/element-plus'
import { computed, defineComponent, onMounted, PropType, ref } from 'vue'

export default defineComponent({
  name: 'TableTpl',
  props: {
    selectChange:{
      type:Function as PropType<(...args: any[]) => void>,
      default:()=>{
        //
      }
    },
    selectList:{// 选中项
      type:Array as PropType<any[]>,
      default:()=>[]
    },
    rowClick:{
      type:Function as PropType<(...args: any[]) => void>,
      default: ()=>{
        //
      }
    },
    operations:{
      type:Array as PropType<NormalOperation[]>,
      default:()=>[] 
    }
  },
  setup(props) {
    
    // el-table组件实例
    const elTable = ref<IElTable>()

    // 是否有有效的operation
    const operationVisible = computed(() => props.operations.some(item => item.perm))

    onMounted(() => {
      if (props.selectList) {
        props.selectList.forEach((item: any) => {
          // 获取默认已选项
          elTable.value?.toggleRowSelection(item,true)
        })
      }
    })
    return {operationVisible}
  }
})
</script>

<style lang="scss" scoped></style>
